<template>
    <el-drawer class="drawer" :append-to-body="true">
        <template #header>
            <h4>系统设置</h4>
        </template>
        <template #default>
            <el-form>
                <el-form-item label="主题颜色">
                    <el-color-picker
                        @change="changeColor"
                        v-model="color"
                        show-alpha
                        :predefine="predefineColors"
                    />
                </el-form-item>
                <el-form-item label="黑夜模式">
                    <el-switch
                        v-model="ifdark"
                        size="default"
                        active-icon="MoonNight"
                        inactive-icon="Sunny"
                        inline-prompt
                        @change="changeTheme"
                    />
                </el-form-item>
                <el-form-item label="修改信息">
                    <el-button
                        type="primary"
                        size="default"
                        :icon="Edit"
                        @click="changeIsEdit"
                    ></el-button>
                </el-form-item>
                <el-form-item label="退出登录">
                    <el-button
                        type="primary"
                        size="default"
                        :icon="SwitchButton"
                        @click="logout"
                    ></el-button>
                </el-form-item>
            </el-form>
            <EditUserInfo v-model="isEdit"></EditUserInfo>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
import { Edit, SwitchButton } from '@element-plus/icons-vue'
import useUserStore from '@/store/modules/user'
import useWebSocketStore from '@/store/modules/wschat'

//获取路由器对象
let $router = useRouter()
//获取用户相关的小仓库
let userStore = useUserStore()
//获取WebSocket小仓库
let webSocketStore = useWebSocketStore()
//颜色组件的数据
let color = ref<string>('#75b543')
let predefineColors = ref<string[]>(['#75b543', '#e64500', '#e68600'])
//收集开关的数据
let ifdark = ref<boolean>(false)
//控制修改信息弹窗是否出现
let isEdit = ref<boolean>(false)

//switch开关进行暗黑模式的切换
const changeTheme = () => {
    let allHtml = document.documentElement
    ifdark.value ? (allHtml.className = 'dark') : (allHtml.className = '')
}

//切换修改信息弹窗状态
const changeIsEdit = () => {
    isEdit.value = true
}

//主题颜色设置
const changeColor = () => {
    let allHtml = document.documentElement
    allHtml.style.setProperty('--el-color-primary', color.value)
    allHtml.style.setProperty('--el-color-primary-light-3', caculateColor(color.value, 0.3))
    allHtml.style.setProperty('--el-color-primary-light-5', caculateColor(color.value, 0.5))
    allHtml.style.setProperty('--el-color-primary-light-7', caculateColor(color.value, 0.7))
    allHtml.style.setProperty('--el-color-primary-light-8', caculateColor(color.value, 0.8))
    allHtml.style.setProperty('--el-color-primary-light-9', caculateColor(color.value, 0.9))
    allHtml.style.setProperty('--el-color-primary-dark-2', caculateColor(color.value, 1.2))
}

//对element-plus的默认颜色进行计算得到深色和浅色
const caculateColor = (color: string, ratio: number) => {
    let rgbaRegex = /rgba?\((\d+), (\d+), (\d+),? (\d*\.?\d+)?\)/
    let matches = color.match(rgbaRegex)
    let r: number, g: number, b: number
    let newR: number, newG: number, newB: number
    if (matches) {
        r = parseInt(matches[1], 10)
        g = parseInt(matches[2], 10)
        b = parseInt(matches[3], 10)
    } else {
        r = 64
        g = 158
        b = 255
    }
    if (ratio > 1) {
        newR = Math.min(255, Math.round(r * (2 - ratio)))
        newG = Math.min(255, Math.round(g * (2 - ratio)))
        newB = Math.min(255, Math.round(b * (2 - ratio)))
    } else {
        newR = Math.min(255, Math.round(r + (255 - r) * ratio))
        newG = Math.min(255, Math.round(g + (255 - g) * ratio))
        newB = Math.min(255, Math.round(b + (255 - b) * ratio))
    }
    let hexR: string = newR.toString(16).padStart(2, '0')
    let hexG: string = newG.toString(16).padStart(2, '0')
    let hexB: string = newB.toString(16).padStart(2, '0')
    let newColor: string = `#${hexR}${hexG}${hexB}`
    return newColor
}

//退出登录的方法(真实接口添加了异步)
const logout = async () => {
    //第一件事：向服务器发送请求，退出登录接口
    //第二件事：仓库当中关于用户的数据清空(在仓库中完成)
    try {
        await userStore.userLogout()
        //关闭WebSocket连接
        webSocketStore.disconnectWebSocket()
    } catch (error) {
        //退出登录失败的提示信息
        ElNotification({
            type: 'error',
            message: (error as Error).message,
        })
    }

    $router.push({ path: '/login' })
    //第三件事：跳转到登录页面
}
</script>

<style scoped lang="scss"></style>
